<template>
    <div class="backDiv">
        <a-row :gutter="[12, 12]">
          <a-col :span="8">
            <!-- 工作状态 -->
            <a-card class="mb-twelve">
              <div class="flex align-center justify-between head-card" >
                <div class="HTitle">工作状态</div>
              </div>
              <div style="height: 222px;display: flex">
                <div class="chartsBox">
                  <div class="info">
                    <div class="star">-20</div>
                    <div class="tit">温度</div>
                    <div class="end">150</div>
                  </div>
                  <div id="speed1" style="width: 100%;height: 222px"></div>
                </div>
                <div class="chartsBox">
                  <div class="info">
                    <div class="star">0</div>
                    <div class="tit">进口压力</div>
                    <div class="end">100</div>
                  </div>
                  <div id="speed2" style="width: 100%;height: 222px"></div>
                </div>    
              </div>    
            </a-card>
            <!-- KV40 -->
            <a-card class="mb-twelve">
              <div class="chart-container" >
                    <!-- 标题区域 -->
                    <div class="header-wrapper">
                        <div class="HTitle">
                            <span class="title">40℃粘度(Cst)</span>                    
                            <span class="value">22.5</span>
                        </div>
                        <a-icon class="icon-menu" type="edit" @click="setVisible(0)" />
                    </div>    
                <!-- 图表区域 -->    
                <!-- <div id="mycharts0" class="chart-area"></div>   -->
              </div>                               
            </a-card>
            <!-- 介电常数 -->
            <a-card class="mb-twelve">
                <div class="chart-container" >
                      <!-- 标题区域 -->
                      <div class="header-wrapper">
                      <div class="HTitle">
                      <span class="title">介电常数</span>                    
                      <span class="value">22.5</span>
                      </div>
                      <a-icon class="icon-menu" type="edit" @click="setVisible(0)" />
                  </div>    
                  <!-- 图表区域 -->    
                  <!-- <div id="mycharts0" class="chart-area"></div>   -->
                </div>                               
              </a-card>
              <!-- 水活性 -->
              <a-card class="mb-twelve">
                <div class="chart-container" >
                      <!-- 标题区域 -->
                      <div class="header-wrapper">
                      <div class="HTitle">
                      <span class="title">水活性</span>                    
                      <span class="value">22.5</span>
                      </div>
                      <a-icon class="icon-menu" type="edit" @click="setVisible(0)" />
                  </div>    
                  <!-- 图表区域 -->    
                  <!-- <div id="mycharts0" class="chart-area"></div>   -->
                </div>                               
              </a-card>
              <!-- 含水量 -->
              <a-card class="mb-twelve">
                <div class="chart-container" >
                      <!-- 标题区域 -->
                      <div class="header-wrapper">
                      <div class="HTitle">
                      <span class="title">含水量</span>                    
                      <span class="value">22.5</span>
                      </div>
                      <a-icon class="icon-menu" type="edit" @click="setVisible(0)" />
                  </div>    
                  <!-- 图表区域 -->    
                  <!-- <div id="mycharts0" class="chart-area"></div>   -->
                </div>                               
              </a-card>
          </a-col>
          <a-col class="chartAndTable" :span="16" :gutter="[12, 12]">
            <a-row class="picAndData" :span="12" :gutter="[12, 12]">  
              <a-col class="pic" :span="16">
                <div class="img-box" style="margin-top: 5px;">
                  <div class="img-state">在线</div>
                  <img class="icon" src="@/assets/img/iconEdit.png" @click="imgVisble = true" />
                  <img class="img" src="@/assets/img/deviceBg.jpg" style="height: 500px" />    
                </div>
              </a-col> 
              <a-col class="dcTable" :span="8">
                <a-card class="mb-twelve">
                  <div class="flex align-center justify-between head-card">
                    <div class="HTitle" style="cursor: pointer" @click="setActive">磨粒分布</div>
                  </div>
                  <div v-if="active==1" class="distribution">
                    <div class="distribution-title">磁铁颗粒</div>
                    <div class="distribution-item beauty-scroll" style="height: 210px">
                      <div v-for="(child,idx) in info.magnetGrain"  :key="idx" class="flex align-stretch">
                        <div class="item-title">{{child.name}}</div>
                        <div class="item-val">{{ child.value }}</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="active==1" class="distribution">
                    <div class="distribution-title">非磁铁颗粒</div>
                    <div class="distribution-item beauty-scroll" style="height: 155px">
                      <div v-for="(child,idx) in info.noMagnetGrain"  :key="idx" class="flex align-stretch">
                        <div class="item-title">{{child.name}}</div>
                        <div class="item-val">{{ child.value }}</div>
                      </div>
                    </div>
                  </div>
                  <div v-if="active==2" class="distribution">
                    <div class="distribution-title">颗粒度分布</div>
                    <div class="distribution-item beauty-scroll" style="height: 365px">
                      <div v-for="(child,idx) in info.particleSizeDistribution.child"  :key="idx" class="flex align-stretch">
                        <div class="item-title">{{child.title}}</div>
                        <div class="item-val">{{ child.value }}</div>
                      </div>
                    </div>
                  </div>
                </a-card>
              </a-col>   
            </a-row>
            <a-row class="chartBox" :span="12">
              <a-card class="mb-twelve" :body-style="{ padding: '10px', height: '100%' }">
                <div class="flex-column" style="height: 100%">
                  <div class="flex align-center justify-between head-card">
                    <div class="HTitle">粘度（40℃）</div>
                    <a-icon class="icon-menu" type="edit" @click="setVisible(1)" />
                  </div>
                  <div id="mycharts0" style="flex: 1; min-height: 260px;width: 1210px;"></div>
                </div>
              </a-card>
            </a-row>            
          </a-col>
        </a-row>
        <a-modal v-model="imgVisble" :footer="null" :maskClosable="false" :width="790" centered title="编辑">
          <div class="modalHeight beauty-scroll">
            <a-row :gutter="[10, 10]">
              <a-col v-for="(item, index) in 4" :key="index" :span="12">
                <div class="set-img" @click="handleImg(index)">
                  <img v-if="imgIdx == index" class="set-icon" src="@/assets/img/iconCheck.png" />
                  <img src="@/assets/img/deviceBg.jpg" />
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="flex align-center justify-center">
            <a-button style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px"
                      @click="imgVisble = false">取消</a-button>
            <a-button type="primary" @click="imgVisble = false">确定</a-button>
          </div>
        </a-modal>
    
        <a-modal v-model="visible" :footer="null" :maskClosable="false" :width="445" centered title="选择参数">
          <div>
            <a-form-model ref="ruleForm" :colon="false" :label-col="{ span: 6 }" :model="form" :rules="formRules" :wrapper-col="{ span: 16 }">
              <a-form-model-item label="日期" prop="date">
                <a-range-picker v-model="form.date" format="YYYY-MM-DD" style="width: 100%;" @change="onChanges">
                  <a-icon slot="suffixIcon" type="calendar" />
                </a-range-picker>
              </a-form-model-item>
              <a-form-model-item label="参数" prop="params">
                <a-radio-group v-model="form.params" name="params">
                  <a-radio v-for="(item, index) in options" disabled :key="index" :value="item.value">
                    {{ item.label }}
                  </a-radio>
                </a-radio-group>
              </a-form-model-item>
            </a-form-model>
          </div>
          <div class="flex align-center justify-center">
            <a-button style="margin-left: 8px;background: #fff;color: #2C3360;border-color: #fff;margin-right: 15px"
                      @click="visible = false">取消</a-button>
            <a-button type="primary" @click="submit">确定</a-button>
          </div>
        </a-modal>
    </div>
</template>
<script setup>
import * as echarts from 'echarts'
import {ref, onMounted } from 'vue';

const imgVisble=ref(false)
const active=ref(2)
const info=ref({
    grainDistribution:{},//铁磁颗粒
    nonMagneticParticles:{},//非铁磁颗粒
    particleSizeDistribution:{}//颗粒度分布
})

onMounted (async()=>{
    initSpeed('speed1',50)
    initSpeed('speed2',30)
    var res = await fetch('/api/device/getdata')
    var resData = await res.json()
    var resD = resData.data[0].list
    let timeList=[];
    let dataList=[];
    for(let i in resD){
        timeList.push(setTime(resD[i].date))
        dataList.push(resD[i].value)
    }
    getInit('mycharts0',timeList,dataList)
}) 
const setTime=(dateTimeString)=>{
    var dateTime = new Date(dateTimeString);
    var year = dateTime.getFullYear();
    var month = (dateTime.getMonth() + 1).toString().padStart(2, '0');
    var day = dateTime.getDate().toString().padStart(2, '0');
    var hours = dateTime.getHours().toString().padStart(2, '0');
    var minutes = dateTime.getMinutes().toString().padStart(2, '0');
    var seconds = dateTime.getSeconds().toString().padStart(2, '0');
    var localTimeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
    return localTimeString
}
const initSpeed=(name,data)=>{
    var chartDom = document.getElementById(name);
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 12
            },
            axisLine: {
              lineStyle: {
                width: 12,
                color: [

                  [
                    0.5,
                    new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#FE422F", // 0% 处的颜色
                        },
                        {
                          offset: 0,
                          color: "#24FF35", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                  ],
                  [
                    1,
                    new echarts.graphic.LinearGradient(
                      1,
                      0,
                      0,
                      0,
                      [
                        {
                          offset: 1,
                          color: "#24FF35", // 0% 处的颜色
                        },
                        {
                          offset: 0,
                          color: "#407FFF", // 100% 处的颜色
                        },
                      ],
                      false
                    ),
                  ],
                ],
              }
            },
            axisTick: {
              show: false
            },
            pointer:{
              color:'#407FFF',
              itemStyle:{
                color:'#407FFF'
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false,
            },

            color:'transparent',
            // anchor: {
            //   show: false,
            //   showAbove: true,
            //   color:'#407FFF',
            //   size: 14,
            //   itemStyle: {
            //     borderWidth: 5,
            //     color:'#000'
            //   }
            // },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 30,
              offsetCenter: [0, '40%'],
              color:'#fff',
            },
            data: [
              {
                value: data
              }
            ]
          }
        ]
      };

      option && myChart.setOption(option);
}
const getInit=(name,time,data)=>{
          // mycharts
          var mycharts = echarts.init(document.getElementById(name));
      var option;
      option = {
        grid: {
          left: '5%',
          right: '10%',
          bottom: '3%',
          top:'10%',
          containLabel: true
        },
        dataZoom: [
          {
            type: 'slider',
            show: true
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        legend:{},
        xAxis: {
          type: 'category',
          data:time,

          boundaryGap: false,
          axisTick: {
            show: false
          },
          splitLine: {                                //网格线
            show: true,                                  //是否显示
            lineStyle: {                                //网格线样式
              color: 'rgba(150, 162, 231, 0.2)',                        //网格线颜色
              width: 1,                                 //网格线类型
            }
          },
          axisLabel: {
            formatter: function (parma) {
              console.log(parma)
              return parma.substring(0,10);
            },
            textStyle: {
              color: '#DADDED'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(150, 162, 231, 0.2)', // 这里设置你想要的颜色
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#CCCFDF'  // 设置y轴字体颜色为红色
            }
          },
          splitLine: {                                //网格线
            show: true,                                  //是否显示
            lineStyle: {                                //网格线样式
              color: 'rgba(150, 162, 231, 0.2)',                        //网格线颜色
              width: 1,                                 //网格线类型
            }
          },

        },
        series: [
          {
            data: data,
            type: 'line',
            lineStyle: {
              width: 3  // 设置折线的宽度为2
            },
            symbolSize: 8,
            color:'#228FFE',
            smooth: true
          }
        ]
      };
      option && mycharts.setOption(option);
      window.onresize = function () {
        mycharts.resize();
      };
}
</script>
<style lang="less" scoped>
.backDiv{
    background-color: transparent;
}
.ant-radio-disabled :deep(.ant-radio-inner::after){
  background-color: #177ddc;
}
.head-card {
  .icon-menu {
    color: #96A2E7;
  }
}
.chartsBox{
  position: relative;
  width: 49%;
  .info{
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0;
    color: #fff;
    bottom: 25px;
    .star,.end{
      font-size: 14px;
      font-weight: bold;
    }
    .tit{
      font-size: 16px;
      font-weight: bold;
      margin: 0 22px;
    }
  }
}
.HTitle {
  font-weight: bold;
  font-size: 16px;
  color: #96A2E7;
  padding-left: 20px;
  margin-left: -24px;
  // margin-bottom: 16px;
  position: relative;
}

.HTitle::after {
  content: "";
  width: 3px;
  height: 14px;
  background: #96A2E7;
  border-radius: 2px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.img-box {
  width: 100%;
  height: 538px;
  box-sizing: border-box;
  position: relative;

  .img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
  }

  .img-state {
    // padding: 10px 29px;
    width: 90px;
    height: 36px;
    font-weight: bold;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 36px;
    text-align: center;
    background: #2F6FC1;
    border-radius: 4px 0px 20px 0px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
  }

  .icon {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 14px;
    right: 16px;
    z-index: 9;
  }
}

.modalHeight {
  max-height: 65vh;
  overflow-y: scroll;
  margin-bottom: 20px;

  .set-img {
    width: 100%;
    height: 240px;
    cursor: pointer;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .set-icon {
      width: 23px;
      height: 23px;
      position: absolute;
      top: 12px;
      right: 12px;
      z-index: 9;
    }
  }
}
.distribution-box{
  // height: 65vh;
  overflow-y: scroll;
  border: 1px solid red;
}

.distribution{
  margin-top: 33px;
  &-title{
    font-weight: 400;
    font-size: 14px;
    color: #DADDED;
    margin-bottom: 9px;
  }
  &-item{
    overflow-y: scroll;
  }
  .item-title,.item-val{
    width: 50%;
    font-weight: 400;
    font-size: 14px;
    color: #DADDED;
    padding: 15px 4px 15px 20px;
  }
  .item-title{
    background: #363E71;
    border-bottom: 1px solid #2A315D;
  }
  .item-val{
    background: #42487A;
    border-bottom: 1px solid #373C63;
  }
}
.rest-card :deep(.ant-card-body) {
  padding: 0;
}

:deep(.ant-radio-inner) {
  background-color: #fff;
  border-color: #FFFFFF;
}

:deep(.ant-radio-checked) {
  border-color: transparent;

}

:deep(.ant-radio-wrapper) {
  color: #E2E5FF;
}
.mb-twelve{
  background-color: #2C3360;
  border: none;
  margin: 5px;
}
/* 新增样式 */
.chart-container {
    display: flex;
    flex-direction: column;
    height: 85px;
  }
  
  .header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  
  .HTitle {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #96A2E7;
  }
  
  .HTitle .title {
    position: relative;
    padding-left: 20px;
    font-size: 20px;
  }
  
  .HTitle .title::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    background: #96A2E7;
    border-radius: 2px;
  }
  
  .HTitle .value {
    font-size: 40px;
    color: #fff;
  }
  
  .chart-area {
    flex: 1;
    height: 220px;
  }
  
:deep(.ant-card) {
  display: flex;
  flex-direction: column;
  
  .ant-card-body {
    flex: 1;
    min-height: 0;
  }
}

.flex-column {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
